<template>
  <div id="welcome-add" style="height:100%">
    <el-container style="height:100%;">
      <el-header height="60px">
        <div class="logo"></div>
        <h3 class="title-log">黑马后台管理系统</h3>
        <el-button
          type="primary"
          size="small"
          @click="logout"
          style="float:right;margin-top: 10px;"
        >退出登录</el-button>
      </el-header>
<el-container>
      <el-aside :width="iswidht">
        <el-menu
          :default-active="defaultActive"
          text-color="#fff"
          background-color="#373d41"
          :unique-opened="true"
          active-text-color="#409EFF"
          menu-trigger="click"
          :collapse-transition="false"
         

          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          :router="true"
        >
          <!-- <el-radio-group
            v-model="isCollapse"
            style="display: flex;
            justify-content: center;"
          >
            <el-radio-button :label="!isCollapse" type="button" style="background:red">|||</el-radio-button>
          </el-radio-group> -->
          <div @click="boxChang" style="text-align: center;background:#495150;color:#fff;">|||</div>

          <el-submenu :index="item1.path" v-for="(item1) in menuList" :key="item1.path">
            <template slot="title">
              <i style="margin-right:10px;" :class="iconsObj[item1.id]"></i>
              <span slot="title">{{item1.authName}}</span>
            </template>
            <el-menu-item-group v-for="item2 in item1.children" :key="item2.path">
              <el-menu-item :index="'/'+ item2.path" @click='handleOpen+("/"+item2.path)'>
                <i class="el-icon-menu"></i>
                {{item2.authName}}
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>    
        </el-menu>
      </el-aside>

    <el-main style="background:#eaedf1;">
      <!-- 坑位 -->
      <router-view></router-view>
    </el-main>
  </el-container>

    </el-container>
  </div>
</template>


<style lang="less" scoped>
#welcome-add {
  height: 100%;
  text-align: center;

  .el-container {
    height: 100%;
    display: flex;
    // flex-direction: column;
    .el-aside {
      // flex: 1;
      
    }
    .el-main{
      flex: 1;
    }
  }
}

.el-menu {
  border-right: 0;
}

.logo {
  float: left;
  height: 100%;
  width: 60px;
  background: url("../assets/heima.png") no-repeat center / 100% 100%;
}
.title-log {
  float: left;
  color: #fff;
  line-height: 60px;
  font-weight: normal;
  font-size: 20px;
  margin-left: 20px;
}
.el-header {
  background-color: #373d41;
  // height: 10%;
  line-height: 60px;
}

.el-aside {
  background-color: #373d41;
}
</style>

<script>
// 导入
import { menus_api } from "@/api/index.js";
export default {
  data() {
    return {
      // 当前页面显示如果点击过就显示点击的
      defaultActive: window.sessionStorage.getItem("defaultActive") || "users",
      isCollapse: false,
      iswidht:"200px",
      menuList: [],
      iconsObj: {
        "125": "iconfont icon-user",
        "103": "iconfont icon-tijikongjian",
        "101": "iconfont icon-shangpin",
        "102": "iconfont icon-danju",
        "145": "iconfont icon-baobiao",
      },
    };
  },

  created() {
    // 调用获取侧边栏菜单函数
    this.getmenuList();
  },
  methods: {
    // 点击退出逻辑
    logout() {
      // 把token清除
      
      window.sessionStorage.setItem("token", "");
      // 返回登录页面
      this.$router.push("/login");
    },
    handleOpen(key) {
      // 获取当前点击的菜单栏的index 属性 赋值于数据层
      this.defaultActive = key;
      console.log(key,1111);
      
      // 本地存储一下点击过的index ,当页面刷新后还保持当前点击的位置
      window.sessionStorage.setItem("defaultActive", key);
    },

    // 定义一个获取左侧菜单列表的函数
    async getmenuList() {
      const res = await menus_api();
     
      // 赋值给数据层
      this.menuList = res.data.data;
    },
      // 点击伸缩侧边栏
  boxChang(){
   this.isCollapse=!this.isCollapse
    this.iswidht= this.isCollapse?"64px":"200px"
  },
  },
};
</script>